<template>
  <view class="phone-agreement">
    <nav-bar left-text="手机号绑定及添加亲友服务协议" />
    <bg-set background="#f2f3f7" />
    <scroll-view
      scroll-y="true"
      class="scroll-y"
      @scrolltolower="scrolltolower"
    >
      <view>
        <template v-if="loading"><loading /></template>
        <template v-else-if="!loading && title"
          ><view style="margin-bottom: 50rpx">{{ title }}</view>
          <view class="message">
            <view
              v-for="item in messageData"
              :key="item"
              style="font-weight: 600"
              >{{ item }}</view
            >
          </view>
          <view class="detail">
            <view v-for="item in detailData" :key="item.subTitle">
              <text style="font-weight: 600">{{ item.subTitle }}</text>
              <template v-if="item.paragraph">
                <view v-for="subItem in item.paragraph">{{ subItem }}</view>
              </template>
            </view>
          </view></template
        >
        <template v-else-if="!loading && !title && !success">
          <loading-error />
        </template>
        <scroll-view-holder />
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { ref, computed, onMounted } from "vue";
import profileAPI from "/api/modules/profile";
export default {
  name: "phone-agreement",
  setup() {
    const agreementData = ref({});
    const loading = ref(false);
    const success = ref(true);
    const getAgreementData = () => {
      loading.value = true;
      success.value = true;
      agreementData.value = {};
      profileAPI
        .getAgreement({ agreement: "phoneAgreement" })
        .then((res) => {
          agreementData.value = res[0].content;
        })
        .catch((err) => {
          success.value = false;
          uni.showToast({
            title: "加载手机号绑定及添加亲友服务协议失败",
            icon: "error",
            duration: 1000,
            position: "top",
          });
          console.log(err);
        })
        .finally(() => {
          loading.value = false;
        });
    };
    const title = computed(() => agreementData.value.title);
    const messageData = computed(() => agreementData.value.message);
    const detailData = computed(() => agreementData.value.detail);
    const scrolltolower = () => {
      uni.showToast({
        title: "我可是有底线的哈",
        duration: 2000,
        icon: "none",
        position: "top",
      });
    };
    onMounted(() => {
      getAgreementData();
    });
    return { loading, success, title, detailData, messageData, scrolltolower };
  },
};
</script>
<style lang='scss' scoped>
.phone-agreement {
  position: fixed;
  width: 100%;
  height: 100vh;
  .scroll-y {
    padding: 50rpx 50rpx 0 50rpx;
    width: 100%;
    height: calc(100vh - 44rpx);
    box-sizing: border-box;
    text-indent: 2em;
    text-align: justify;
    text-justify: inter-word;
    .message {
      margin-bottom: 50rpx;
    }
    ::v-deep .uni-load-more__text {
      margin-left: -50rpx;
    }
    ::v-deep .loading-error {
      uni-text {
        margin-left: -50rpx;
      }
    }
  }
}
</style>